<template>
  <!--      {{props.data}}{{oldFatherId}}-->
  <n-layout style="height: 450px">
    <n-thing>
      <template
        v-if="avatar"
        #avatar
      >
        <n-avatar
          round
          src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg"
        />
      </template>
      <template
        v-if="header"
        #header
      >
        <n-space justify="center">
          <n-tag
            type="success"
            v-if="oldFatherId[0]?.name.length > 0"
          >
            {{ oldFatherId[0]?.name }}
          </n-tag>
          <n-tag
            type="success"
            v-if="oldFatherId[1]?.name.length > 0"
          >
            {{ oldFatherId[1]?.name }}
          </n-tag>
          <n-tag
            type="success"
            v-if="oldFatherId[2]?.name.length > 0"
          >
            {{ oldFatherId[2]?.name }}
          </n-tag>
          <n-tag
            type="error"
            v-if="oldFatherId.length <= 0"
          >
            无记录，请重新选择
          </n-tag>
        </n-space>
      </template>
      <template
        v-if="headerExtra"
        #header-extra
      >
        <n-dropdown
          :options="options"
          placement="bottom-start"
          @select="handleSelect"
        >
          <n-button
            strong
            secondary
            circle
            type="primary"
          >
            ···
          </n-button>
        </n-dropdown>
      </template>
      <template
        v-if="description"
        #description
      >
        <n-space>
          <n-gradient-text type="info"> 开始时间： </n-gradient-text>
          {{ timestampToDateTime(data.startTime) }}
          <n-gradient-text type="info"> 结束时间： </n-gradient-text>
          {{ timestampToDateTime(data.endTime) }}
          <n-gradient-text type="info"> 花费时间： </n-gradient-text>
          {{ changeTimeUnit(data.endTime - data.startTime) }}
          <n-gradient-text type="info"> 地点： </n-gradient-text>
        </n-space>
      </template>
      <n-grid
        :x-gap="12"
        :y-gap="8"
        :cols="1"
      >
        <n-grid-item>
          <n-space>
            <n-gradient-text
              :size="20"
              :gradient="{ from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }"
            >
              感想：
            </n-gradient-text>
          </n-space>
          <div style="height: 100px">
            <n-input
              :value="data.markDownFile"
              type="textarea"
              placeholder="暂无内容"
              readonly
              show-count
              style="height: 100px"
            />
          </div>
        </n-grid-item>
        <n-grid-item>
          <n-space>
            <n-gradient-text
              :size="20"
              :gradient="{ from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }"
            >
              图片：
            </n-gradient-text>
            <PicShowList v-model="picShowListModel"></PicShowList>
          </n-space>
        </n-grid-item>
        <n-grid-item>
          <n-space>
            <n-gradient-text
              :size="20"
              :gradient="{ from: 'rgb(85, 85, 85)', to: 'rgb(170, 170, 170)' }"
            >
              视频：
            </n-gradient-text>
            <VedioShowList v-model="vedioShowListModel"></VedioShowList>
          </n-space>
        </n-grid-item>
      </n-grid>
    </n-thing>
  </n-layout>
</template>

<script lang="ts" setup generic="T extends object & TaskLogData">
import PicShowList from "@/components/common/PicShowList.vue";
import VedioShowList from "@/components/common/VedioShowList.vue";
import { TaskLogData } from "@model/TaskLogMap";
import { changeTimeUnit, timestampToDateTime } from "@utils/DateUtils";
import { NButton } from "naive-ui";
import { ref, onMounted, inject, watch, reactive } from "vue";

// 父组件数据
const props = defineProps<{ data: TaskLogData }>();
const oldFatherId = ref<Array<{ id: number | undefined; name: string }>>([]);
const getFatherId = async () => {
  oldFatherId.value = await TaskLogData.getFatherId(props.data.type, props.data.taskId);
};
onMounted(getFatherId);
watch(props, getFatherId);
const picShowListModel = reactive({
  toRemovePicList: new Array<string>(),
  picList: props.data.picList,
  toEdit: false,
});
const vedioShowListModel = reactive({
  toRemovePicList: new Array<string>(),
  picList: props.data.mediaList,
  toEdit: false,
});
// 页面数据
const avatar = ref(true);
const header = ref(true);
const headerExtra = ref(true);
const description = ref(true);
const options = [
  {
    label: "编辑",
    key: "edit",
  },
];
const editSettings = inject<{
  toEdit: boolean;
  toDelete: boolean;
  toDealRowId: string | undefined;
  toRecord: boolean;
}>("editSettings");
const handleSelect = (key: string, node: string) => {
  console.log(key, node, editSettings);
  if (key == "edit" && editSettings !== undefined) {
    editSettings.toEdit = true;
    editSettings.toDealRowId = props.data.id;
  }
};
</script>
